 /**
 * @file border-1px.styl
 * @author lihuanji
 *
 * 边框1像素
 */

/**
 * @param {$type} 哪个位置有边框
 * @param {$border-color} 边框颜色
 * @param {$size} 边线尺寸
 */
border1px($type, $border-color = #D4D4D4, $size = 1PX, $border-radius = 0)
    $border-width = 'border-%s-width' % $type

    if $type == "all"
        $border-width = 'border-width'

    border: 0 solid $border-color

    @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5)
        position: relative
        border: none !important

        &::after
            content: ' '
            display: block
            position: absolute
            top: 0
            right: -33.33%
            bottom: -33.33%
            left: 0
            border: 0 solid $border-color
            pointer-events: none
            // 解决挡住点击事件的问题
            width: 133.33%
            box-sizing: border-box
            transform-origin: 0 0
            -moz-transform-origin: 0 0
            -webkit-transform-origin: 0 0
            -o-transform-origin: 0 0
            transform: scale(0.75)
            -moz-transform: scale(0.75)
            -webkit-transform: scale(0.75)
            -o-transform: scale(0.75)
            border-radius: $border-radius

        &::after
            {$border-width}: $size
    @media (-webkit-min-device-pixel-ratio: 2), (min-device-pixel-ratio: 2)
        position: relative
        border: none !important
        
        &::after
            content: ' '
            display: block
            position: absolute
            top: 0
            right: -100%
            bottom: -100%
            left: 0
            border: 0 solid $border-color
            pointer-events: none
            // 解决挡住点击事件的问题
            width: 200%
            box-sizing: border-box
            transform-origin: 0 0
            -moz-transform-origin: 0 0
            -webkit-transform-origin: 0 0
            -o-transform-origin: 0 0
            transform: scale(0.5)
            -moz-transform: scale(0.5)
            -webkit-transform: scale(0.5)
            -o-transform: scale(0.5)
            border-radius: $border-radius

        &::after
            {$border-width}: $size
